<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
  >
    <van-cell v-for="item in list" 
    :key="item.id" 
    :title="item.title" 
    @click="editMemo(item.id)"
    clickable>
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon >
        <van-icon
          name="cross"
          class="cross-icon"
          @click.stop="deleteMemo(item.id)"
        />
      </template>
    </van-cell>
  </van-list>
</template>
<script setup>
import { useMemoList } from "@/features/Memo/useMemoList";

const { list, loading, finished, deleteMemo, editMemo } = useMemoList();

</script>

<style scoped>
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.cross-icon {
  font-size: 16px;
  line-height: inherit;
}
</style>
